<template>
    <div>
            <el-col :span="9" >
                <div class="charts"  ref="chart1" > </div>
            </el-col>
            <el-col :span="15">
                <div class="statable">
                    <el-table border :data="tableData">
                        <el-table-column prop="" type="index" width="70" header-align="center" align="center"></el-table-column>
                        <el-table-column prop="customerType" label="客户分类" header-align="center" align="center"  ></el-table-column>
                        <el-table-column prop="cusNum.cusNum" label="客户数" header-align="center" align="center"  ></el-table-column>
                        <el-table-column prop="acReNum.acReNum" label="行动数" header-align="center" align="center"  ></el-table-column>
                        <el-table-column prop="oppoNum.oppoNum" label="销售机会数" header-align="center" align="center"  ></el-table-column>
                        <el-table-column prop="contractNum.contractNum" label="合同数" header-align="center" align="center"  ></el-table-column>
                        <el-table-column  label="销售额" header-align="center" align="center"  >
                            <template slot-scope="s">
                                {{s.row.contractNum.totalMoney == null?'0':s.row.contractNum.totalMoney }}
                            </template>
                        </el-table-column>
                        <el-table-column label="回款额" header-align="center" align="center"  >
                            <template slot-scope="s">
                                {{s.row.contractNum.retuMoney == null?'0':s.row.contractNum.retuMoney }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
    </div>
</template>

<script>

    export default {
        name: "StatisticContent",
        data:function(){
            return{
                tableData:[],
                myChart:'',
                option: {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        data: []
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: []
                        }
                    ]
                }
            }
        },
        computed:{
            chartsData(){
                let data = []
                this.tableData.forEach(t => {
                    let map = {}
                    map.name = t.customerType
                    map.value = t.cusNum.cusNum
                    data.push(map)
                })
                return data
            },
            nameData(){
                let data = []
                this.tableData.forEach(t => {
                    let map = {}
                    map.name = t.customerType
                    data.push(map)
                })
                return data
            }
        },
        methods:{
            getAccordCusType(index){
                this.axios.get("api/customer/static_data",{params:{'index':index?index:1}})
                    .then(v=>{
                        this.tableData = v.data
                        let chartsData = []
                        this.tableData.forEach(t => {
                            let map = {}
                            map.value = t.cusNum.cusNum
                            map.name = t.customerType
                            chartsData.push(map)
                        })
                        let texts,names;

                        if(index == 1){
                            texts = '客户类型统计'
                            names = '客户类型'
                        }else{
                            texts = '客户来源统计'
                            names = '客户来源'
                        }

                        this.myChart.setOption({
                            title:{
                                text: texts
                            },
                            legend: {
                                data: chartsData.map(item => item.name)
                            },
                            series:  {
                                    name:names,
                                    type: 'pie',
                                    data:chartsData
                                },
                            emphasis: {
                                label: {
                                    show: true  ,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },


                        });
                    }).catch()

            },
            initCharts1() {
                 this.myChart = this.$echarts.init(this.$refs.chart1)
                // 绘制图表
                this.myChart.setOption(this.option);
            }
        },
        mounted() {
            this.initCharts1();
        },
        created() {
            this.getAccordCusType(1);
        }

    }
</script>

<style scoped>
    .statable{
        margin-left: 20px;
        min-height: 300px;
    }
    .charts{
        width: 100%;
        height: 400px;
        border: 1px solid #e4e7ee;
    }
</style>